<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'

import BatchPrice from './batch-price.vue'
import PriceInput from './price-input.vue'
import SkuHeaderItem from './sku-header-item.vue'

const emits = defineEmits(['deleteSku'])
const { createMessage } = useMessage()
type IskuHeaderData = {
    isFreeInstall: number
    isFreeShip: number
    isIncludeTax: number
}
const skuHeaderData = defineModel<IskuHeaderData>('skuHeaderData', { required: true })
const dataStructure = defineModel<any>('dataStructure', { required: true })
const gridOptions = reactive<VxeGridProps<any>>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { type: 'checkbox', width: 50 },
        { field: 'skuName', slots: { default: 'skuName_default', header: 'skuName_header' }, title: 'sku 名称' },
        { field: 'skuAttributeInfo', slots: { default: 'skuAttributeInfo_default' }, title: '销售属性' },
        { field: 'skuCount', slots: { default: 'skuCount', header: 'skuCount_header' }, title: '计量单位数量' },
        { field: 'productModel', slots: { default: 'productModel_default', header: 'productModel_header' }, title: '型号' },
        { field: 'skuPriceType', slots: { default: 'skuPriceType_default', header: 'skuPriceType_header' }, title: '价格类型' },
        { field: 'skuPrice', slots: { default: 'skuPrice_default', header: 'skuPrice_header' }, title: '价格', width: 300 },
        { field: 'skuPriceIntroduce', slots: { default: 'skuPriceIntroduce_default' }, title: '价格说明' },
    ],
    // data: [],
    height: 550,
    keepSource: true,
    pagerConfig: {
        enabled: false,
    },
    showOverflow: true,
})

const options = [
    {
        label: '区间参考价',
        value: 0,
    },
    {
        label: '固定参考价',
        value: 1,
    },
    {
        label: '固定成交价',
        value: 2,
    },
    {
        label: '询价',
        value: 3,
    },
]

const tableRef = ref()
const tableData = ref()
const visible = ref<boolean>(false)
watchEffect(() => {
    if (dataStructure.value) {
        tableData.value = dataStructure.value
    }
})

function deleteData() {
    const $table = tableRef.value?.tableInstance
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        if (selectRecords.length) {
            if (tableData.value && (tableData.value.length === 1 || tableData.value.length === selectRecords.length)) {
                createMessage.warning('至少保留一条数据')
                return
            }
            tableData.value = tableData.value.filter(item => !selectRecords.find(i => i._X_ROW_KEY === item._X_ROW_KEY))
            dataStructure.value = tableData.value
            emits('deleteSku', dataStructure.value)
            createMessage.success('删除成功')
        }
        else {
            createMessage.warning('请至少选择一条数据')
        }
    }
}

function batchPriceChange(e) {
    console.log(e, 'batchPriceChange')
    // tableData.value.forEach((item) => {
    //     item.skuPriceType = e.skuPriceType
    //     item.skuPrice = e.skuPrice
    //     item.skuPriceIntroduce = e.skuPriceIntroduce
    // })
    for (let i = 0; i < tableData.value.length; i++) {
        tableData.value[i].skuPriceType = e.skuPriceType
        tableData.value[i].skuPrice = e.skuPrice
        tableData.value[i].skuPriceIntroduce = e.skuPriceIntroduce
    }
    console.log(tableData.value, 'tableData')
}

function skuPriceTypeChange(row: any) {
    row.skuPrice = ''
}
</script>

<template>
    <div class="flex w-full">
        <SkuHeaderItem v-model:modelValue="skuHeaderData.isIncludeTax"
                       label="是否含税"
                       :options="[{
                           label: '是',
                           value: 1,
                       }, {
                           label: '否',
                           value: 0,
                       }]"
        />

        <div class="ml-32">
            <SkuHeaderItem v-model:modelValue="skuHeaderData.isFreeShip"
                           label="是否包运费"
                           :options="[{
                               label: '包运费',
                               value: 1,
                           }, {
                               label: '不包运费',
                               value: 0,
                           }]"
            />
        </div>

        <div class="ml-32">
            <SkuHeaderItem v-model:modelValue="skuHeaderData.isFreeInstall"
                           label="是否包安装"
                           :options="[{
                               label: '包安装',
                               value: 1,
                           }, {
                               label: '不包安装',
                               value: 0,
                           }, {
                               label: '无需安装',
                               value: 2,
                           }]"
            />
        </div>

        <div class="space-x-8 ml-auto flex">
            <el-button @click="visible = true">
                <div i-mdi:yen
                     class="mr-4"
                />
                批量价格
            </el-button>

            <el-button @click="deleteData">
                <div i-material-symbols:delete
                     class="mr-4"
                />
                批量删除
            </el-button>
        </div>
    </div>

    <SearchTable v-bind="gridOptions"
                 ref="tableRef"
                 :data="tableData"
    >
        <template #skuName_header>
            <span class="text-red">*</span>sku名称(注:sku 名称相同时只保存一条)
        </template>

        <template #skuName_default="{ row }">
            <el-input v-model="row.skuName"
                      placeholder="请输入"
            />
        </template>

        <template #skuAttributeInfo_default="{ row }">
            {{ row.skuAttributeInfo ? row.skuAttributeInfo : '--' }}
        </template>

        <template #skuCount_header>
            <span class="text-red">*</span>计量单位数量
        </template>

        <template #skuCount="{ row }">
            <el-input-number v-model="row.skuCount"
                             placeholder="请输入"
                             :min="1"
                             :max="999999"
                             controls-position="right"
            />
        </template>

        <template #productModel_header>
            <span class="text-red">*</span>型号
        </template>

        <template #productModel_default="{ row }">
            <el-input v-model="row.productModel"
                      placeholder="请输入"
            />
        </template>

        <template #skuPriceType_header>
            <span class="text-red">*</span>

            价格类型
            <el-popover content="价格类型说明"
                        placement="top"
                        effect="light"
                        :width="300"
            >
                <template #reference>
                    <span class="text-blue">（说明）</span>
                </template>
            </el-popover>
        </template>

        <template #skuPriceType_default="{ row }">
            <el-select v-model="row.skuPriceType"
                       placeholder="请选择"
                       style="width: 120px"
                       @change="skuPriceTypeChange(row)"
            >
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                />
            </el-select>
        </template>

        <template #skuPrice_header>
            <span class="text-red">*</span>价格
        </template>

        <template #skuPrice_default="{ row }">
            <PriceInput v-model:skuPrice="row.skuPrice"
                        v-model:skuPriceType="row.skuPriceType"
            />
        </template>

        <template #skuPriceIntroduce_default="{ row }">
            <el-input v-model="row.skuPriceIntroduce"
                      placeholder="填写价格说明"
            />
        </template>
    </SearchTable>

    <BatchPrice v-model:visible="visible"
                @batch-price="batchPriceChange($event)"
    />
</template>
